<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理</title>
    <style>
        body{font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif;background:#f8fafc;color:#0f172a;margin:0}
        .container{max-width:1100px;margin:0 auto;padding:2rem}
        .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
        .btn{padding:.6rem 1rem;border:none;background:#6366f1;color:#fff;border-radius:.5rem;text-decoration:none}
        table{width:100%;border-collapse:collapse;background:#fff;border-radius:.5rem;overflow:hidden}
        th,td{padding:0.9rem 1rem;border-bottom:1px solid #e2e8f0;text-align:left}
        th{background:#f1f5f9}
        tr:hover{background:#f8fafc}
        .actions{display:flex;gap:.5rem}
        .secondary{background:#e2e8f0;color:#0f172a}
        form{display:inline}
        .search{display:flex;gap:.5rem;margin:1rem 0}
        input[type=text]{padding:.5rem .75rem;border:1px solid #e2e8f0;border-radius:.5rem}
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>文章管理</h2>
        <a class="btn" th:href="@{/admin/article/new}">新建文章</a>
    </div>

    <form class="search" method="get" th:action="@{/admin/articles}">
        <input type="text" name="q" th:value="${q}" placeholder="搜索标题/内容">
        <button class="btn secondary" type="submit">搜索</button>
    </form>

    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>分类</th>
            <th>更新时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item : ${page.content}">
            <td th:text="${item.id}"></td>
            <td th:text="${item.title}"></td>
            <td th:text="${item.category}"></td>
            <td th:text="${#temporals.format(item.updatedAt, 'yyyy-MM-dd HH:mm')}"></td>
            <td class="actions">
                <a class="btn secondary" th:href="@{'/admin/article/' + ${item.id}}">编辑</a>
                <form th:action="@{'/admin/article/' + ${item.id} + '/delete'}" method="post">
                    <button class="btn" type="submit" onclick="return confirm('确认删除?')">删除</button>
                </form>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
